"use client"

import {SidebarInset} from "@/components/ui/sidebar";
import {Separator} from "@/components/ui/separator";
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbSeparator
} from "@/components/ui/breadcrumb";
import {usePathname} from "next/navigation";
import React from "react";

function pathnameToList(pathname: string) {
    // 去除开头的斜杠（如果有）
    const cleanPathname = pathname.startsWith('/') ? pathname.slice(1) : pathname;

    // 将路径按斜杠分割成数组
    const segments = cleanPathname.split('/');

    // 初始化结果数组和累积路径
    const result: { pathname: string; title: string; }[] = [];
    let accumulatedPath = '';

    // 遍历每个路径段，并构建累积路径和标题
    segments.forEach((segment) => {
        if (segment) {
            accumulatedPath += `/${segment}`;
            const title = segment.charAt(0).toUpperCase() + segment.slice(1);
            result.push({ pathname: accumulatedPath, title });
        }
    });

    // 如果没有其他路径段，添加根路径
    if (result.length === 0) {
        result.push({ pathname: '/', title: 'Home' });
    } else {
        // 确保根路径总是存在
        if (result[0].pathname !== '/') {
            result.unshift({ pathname: '/', title: 'Home' });
        }
    }

    return result;
}

export default function WorkbenchLayout({children}: { children: React.ReactNode }) {
    const pathname = usePathname();
    const pathnameListUC = pathnameToList(pathname);
    return (
        <SidebarInset>
            <header
                className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
                <div className="flex items-center gap-2 px-4">
                    <Separator orientation="vertical" className="mr-2 h-4"/>
                    <Breadcrumb>
                        <BreadcrumbList>
                            {
                                pathnameListUC.map((pathnameKey, index) => {
                                    return (
                                        <div className="flex items-center gap-1.5 mr-0" key={index}>
                                            <BreadcrumbItem className="hidden md:block">
                                                <BreadcrumbLink href={pathnameKey.pathname}>
                                                    {pathnameKey.title}
                                                </BreadcrumbLink>
                                            </BreadcrumbItem>
                                            {pathnameListUC.length - 1 !== index ?
                                                <BreadcrumbSeparator className="hidden md:block"/> : ''}
                                        </div>

                                    )
                                })
                            }
                        </BreadcrumbList>
                    </Breadcrumb>
                </div>
            </header>
            {children}
        </SidebarInset>
    )
}